<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>操作人管理</el-breadcrumb-item>
                <el-breadcrumb-item>操作人员</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <el-button size="small" @click="addHandle">添加操作人</el-button>
                    <!-- <el-button size="small" @click="addIdentify">添加身份</el-button> -->
                </div>
                <div>
                    <span>人员名称：</span>
                    <el-input size="small" v-model="userName" placeholder="请输入操作人名称"></el-input>
                </div>
                <div>
                    <span style="width: 74px;">注册日期：</span>
                    <el-date-picker v-model="selectData" type="daterange" align="right" unlink-panels size="small"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-search" @click="getList('search')">搜索</el-button>
                    <el-button size="small" icon="el-icon-refresh-right" @click="getList('res')">重置</el-button>
                    <el-button size="small" icon="el-icon-upload2" @click="handle('up', 'top')">启用</el-button>
                    <el-button size="small" icon="el-icon-download" @click="handle('down', 'top')">禁用</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="operatorId" label="操作人ID" width="100"></el-table-column>
                <el-table-column prop="operatorName" label="名称"></el-table-column>
                <el-table-column prop="operatorAccount" label="账号"></el-table-column>
                <el-table-column prop="operatorPassword" label="密码"></el-table-column>
                <el-table-column prop="createTime" label="注册时间"></el-table-column>
                <el-table-column prop="identityName" label="身份"></el-table-column>
                <el-table-column prop="operatorStatus" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.operatorStatus == 1">使用中</el-tag>
                        <el-tag type="warning" v-else>禁用中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-tickets"
                            @click="handle('right', 'table', scope.row)">授权</el-button>
                        <el-button size="small" icon="el-icon-upload2"
                            @click="handle('up', 'table', scope.row.operatorId)"
                            v-if="scope.row.operatorStatus == 0">启用</el-button>
                        <el-button size="small" icon="el-icon-download" v-if="scope.row.operatorStatus == 1"
                            @click="handle('down', 'table', scope.row.operatorId)">禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>


            <el-dialog :title="addFlag == 'add' ? '添加人员' : '授权'" :visible.sync="addDia"
                :width="addFlag == 'add' ? '30%' : '20%'" :before-close="closeDia">
                <template v-if="addFlag == 'add'">
                    <el-form :model="addForm" :rules="addRules" ref="add" label-width="100px">
                        <el-form-item label="操作人名称" prop="userName">
                            <el-input v-model="addForm.userName" placeholder="请输入操作人名称"></el-input>
                        </el-form-item>
                    </el-form>
                </template>
                <template v-if="addFlag == 'right'">
                    <span>授权身份：</span>
                    <el-select v-model="selectedIdentifyList" placeholder="请选择" style="width: 200px;">
                        <el-option v-for="item in identifyList" :key="item.identityId" :label="item.identityName"
                            :value="item.identityId">
                        </el-option>
                    </el-select>
                </template>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDia">取 消</el-button>
                    <el-button type="primary" @click="addSubmit()">确 定</el-button>
                </span>
            </el-dialog>

            <el-dialog title="添加身份" :visible.sync="addIdentifyByName" width="30%" :before-close="closeaddIdentify">
                <el-form label-width="100px">
                    <el-form-item label="身份名称">
                        <el-input v-model="identifyName" placeholder="输入身份名称"></el-input>
                    </el-form-item>
                    <div class="block">
                        <span class="demonstration">请选择管理菜单</span>
                        <el-cascader v-model="selectedMenus" :options="menus" :props="props" clearable></el-cascader>
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeaddIdentify">取 消</el-button>
                    <el-button type="primary" @click="Identitycommit">确 定</el-button>
                </span>
            </el-dialog>





        </el-card>

    </div>
</template>

<script>
import { getOperatorList, addOperator, updateOperatorStaus, getIdentityList, updateIdentity, getMenuListByCompanyId, addIdentityList } from '../../network/operator'
export default {
    data() {
        return {
            selectedMenus: [],
            props: {
                multiple: true,
                value: 'menuId',
                label: 'menuName',
                children: 'children'
            },
            addIdentifyByName: false,
            identifyName: '',
            operatorId: 0,
            selectedIdentifyList: [],
            identifyList: [],
            companyId: sessionStorage.companyId,
            tableData: [{
                product_name: 1
            }],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,

            userName: '',
            selectData: [],

            addDia: false,
            addFlag: '',//   right  授权   add 添加
            addForm: {
                userName: '',
            },
            addRules: {
                userName: [
                    { required: true, message: '请输入人员名称', trigger: 'blur' },
                ],
            },
            selectList: [],//勾选的数据

            selectUser: '',// 授权的人员
            userRight: [],
            rightList: [
                {
                    key: 1,
                    label: '商品列表',
                },
                {
                    key: 2,
                    label: '视频列表',
                },
                {
                    key: 3,
                    label: '文章列表',
                },
            ],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            menus: []


        };
    },
    methods: {
        Identitycommit() {
            let Ids1 = '';
            let Ids2 = '';

            for (let i = 0; i < this.selectedMenus.length; i++) {
                if (!Ids1.includes(this.selectedMenus[i][0])) {
                    Ids1 += this.selectedMenus[i][0] + ',';
                }
                // 检查Ids2中是否已经存在该元素
                if (!Ids2.includes(this.selectedMenus[i][1])) {
                    Ids2 += this.selectedMenus[i][1] + ',';
                }
            }
            let Ids = Ids1 + Ids2;

            console.log(Ids);
            addIdentityList({
                Ids: Ids,
                identityName: this.identifyName,
                companyId: this.companyId
            }).then(res => {
                this.closeaddIdentify();
                this.getList();

            })
        },
        submitIdentify() {

        },
        addIdentify() {
            this.getMenuList();
            this.addIdentifyByName = true;
        },
        selectChange(val) {
            console.log(val);

            this.selectList = val
        },
        //  获取评论列表
        getList(flag) {
            if (flag == 'search') {
                // 获取数据
                console.log(this.userName);
                console.log(this.selectData);
                if (this.selectData[0] != null && this.selectData[1] != null) {
                    getOperatorList({
                        companyId: this.companyId,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        startTime: this.selectData[0],
                        endTime: this.selectData[1],
                        operatorName: this.userName
                    }).then(res => {
                        if (res.flag) {
                            this.tableData = res.data.list,
                                this.totalNum = res.data.total
                        }
                    })
                } else {
                    getOperatorList({
                        companyId: this.companyId,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        startTime: this.selectData[0],
                        endTime: this.selectData[1],
                        operatorName: this.userName
                    }).then(res => {
                        if (res.flag) {
                            this.tableData = res.data.list,
                                this.totalNum = res.data.total
                        }
                    })
                }

            } else if (flag == 'res') {
                this.tableData = []
                this.orderNum = ''
                this.account = ''
                this.userName = ''
                this.selectData = []
                this.$message.success('已重置')
                this.getList('search');
            }
        },


        handle(flag, position, obj) {
            if (position == 'top' && this.selectList.length == 0) {
                this.$message.warning('请选择要操作的数据')
                return
            }

            if (position == 'top') {
                if (flag == 'up') {
                    // 启用多个
                    let Ids = '';
                    for (let i = 0; i < this.selectList.length; i++) {
                        Ids = Ids + this.selectList[i].operatorId + ',';
                    }
                    updateOperatorStaus({
                        Ids: Ids,
                        Status: 1
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                } else {
                    // 禁用多个
                    // 启用多个
                    let Ids = '';
                    for (let i = 0; i < this.selectList.length; i++) {
                        Ids = Ids + this.selectList[i].operatorId + ',';
                    }
                    updateOperatorStaus({
                        Ids: Ids,
                        Status: 0
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                }
            } else {
                if (flag == 'up') {
                    // 启用
                    updateOperatorStaus({
                        Ids: obj,
                        Status: 1
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                } else if (flag == 'down') {
                    // 禁用
                    updateOperatorStaus({
                        Ids: obj,
                        Status: 0
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                } else if (flag == 'right') {
                    this.IdentityList()
                    // 授权
                    this.selectUser = obj
                    this.addDia = true
                    this.addFlag = flag
                }
            }
        },

        closeDia() {
            this.addDia = false
            if (this.addFlag == 'add') {
                this.$refs.add.resetFields();
            }
        },

        addSubmit() {

            if (this.addFlag == 'add') {
                this.$refs.add.validate((valid) => {
                    if (!valid) return
                    addOperator({
                        companyId: this.companyId,
                        operatorName: this.addForm.userName,
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                            this.closeDia()
                        }
                    })

                });
            } else if (this.addFlag == 'right') {
                if (this.selectedIdentifyList.length == 0) {
                    this.$message.warning('请选择要分配的权限')
                    return
                }
                console.log(this.selectedIdentifyList);
                console.log(this.selectUser.operatorId);
                updateIdentity({
                    operatorId: this.selectedIdentifyList,
                    identityId: this.selectUser.operatorId
                }).then(res => {
                    if (res.flag) {
                        this.getList('search');
                        this.closeDia()
                    }
                })

            }
        },

        addHandle() {
            this.addDia = true
            this.addFlag = 'add'
        },

        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        getMenuList() {
            getMenuListByCompanyId({}).then(res => {
                if (res.flag) {
                    this.menus = res.data;
                }
            })
        },
        closeaddIdentify() {
            this.addIdentifyByName = false;
        },
        IdentityList() {
            getIdentityList({
                companyId: this.companyId,
            }).then(res => {
                if (res.flag) {
                    this.identifyList = res.data
                }
            })
        }

    },
    created() {
        getOperatorList({
            companyId: this.companyId,
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }).then(res => {
            if (res.flag) {
                this.tableData = res.data.list,
                    this.totalNum = res.data.total
            }
        }),
            this.IdentityList()
    },
    filters: {

    },
};
</script>

<style scoped>
.btnBox>div>span {
    width: 100px;
    display: inline-block;
    font-size: 14px;
}

.nameTip {
    margin-bottom: 16px;
}
</style>